<template>
  <div class="bs h-full bg-white overflow-hidden">
    <!--<div class="dz-tab pl-16 flex dzTabRef" ref="dzTabRef" v-if="!query.pageType.includes('cgx')">
      <span class="title">{{ state.dzTitle }}：</span>
      <span @click="dzTabEvent(item)" v-for="(item, key) in state.dzTab" :key="key"
        :class="['dz-tab-item relative', state.dzTabActive == item.regionNum ? 'active' : '', item.isdisable == 1 ? 'dz-tab-disable' : '']">
        {{ item.regionName }}
        <i class="line absolute" v-if="key < state.dzTab.length - 1"></i>
      </span>
    </div>-->
    <div class="dz-tab pl-16 flex dzTabRef" ref="dzTabRef" v-if="!query.pageType.includes('cgx')">
      <div style="width: 5%" class="dz-title-box">
        <span class="title">{{ state.dzTitle }}：</span>
      </div>
      <div class="new-dz-wrap">
        <div class="flex justify-between">
          <span
            @click="dzTabEvent(item)"
            v-for="(item, key) in state.dzTab.slice(0, 9)"
            :key="key"
            :class="[
              'flex-1 dz-tab-item relative',
              state.dzTabActive == item.regionNum ? 'active' : '',
              item.isdisable == 1 ? 'dz-tab-disable' : ''
            ]"
          >
            {{ item.regionName }}
            <i class="line absolute" v-if="key < state.dzTab.length - 1"></i>
          </span>
        </div>
        <div class="flex justify-between mt-4">
          <span
            @click="dzTabEvent(item)"
            v-for="(item, key) in state.dzTab.slice(9, state.dzTab.length)"
            :key="key"
            :class="[
              'flex-1 dz-tab-item relative',
              state.dzTabActive == item.regionNum ? 'active' : '',
              item.isdisable == 1 ? 'dz-tab-disable' : ''
            ]"
          >
            {{ item.regionName }}
            <i class="line absolute" v-if="key < state.dzTab.length - 1"></i>
          </span>
        </div>
      </div>
    </div>

    <div class="p-16" :style="{ height: wrapHeight }">
      <!--7.18 设计图没有先注释 configInfo.pageTip-->
      <div class="bs-page-tip pl-16" v-if="false">
        <el-icon class="relative top4" :size="16" color="#FF3A4F">
          <Warning />
        </el-icon>
        <span style="color: #ff3a4f"> *{{ configInfo.pageTip.title }} </span>
        {{ configInfo.pageTip.content }}
      </div>
      <!--tab-->
      <el-tabs
        v-model="state.activeName"
        type="card"
        @tab-click="tabsClick"
        ref="tabRef"
        class="tabRef"
      >
        <el-tab-pane
          v-for="(item, key) in configInfo.tabPane"
          :key="key"
          :label="item.label"
          :name="item.prop"
        ></el-tab-pane>
      </el-tabs>
      <!--筛选条件-->

      <div>
        <!--目录的暂时去掉两个条件-->
        <el-form v-if="false" :inline="false" ref="lineFormRef" class="lineFormRef">
          <div class="flex flex-wrap">
            <div style="width: 31%">
              <el-form-item label="项目名称：" label-width="100px" class="proj-name">
                <el-input v-model="state.projName" placeholder="请输入项目名称查询" clearable />
              </el-form-item>

              <el-form-item label="项目所在地：" label-width="100px" class="address">
                <area-select
                  ref="refAreaSelect"
                  @change="changeArea"
                  @countryChange="countryChange"
                  @changeAreaProp="changeAreaProp"
                ></area-select>
              </el-form-item>
              <!-- <el-form-item label="国民经济行业分类：" label-width="140px">
                <industry-categorys @confirm="logConfirm" ref="pageTreeRef" />
              </el-form-item>-->
            </div>
            <div style="width: 37%">
              <el-form-item
                v-if="query.pageType.includes('ml')"
                label="意向总投资："
                label-width="200px"
              >
                <div class="flex" style="width: 100%">
                  <el-input
                    v-model="state.totalInvestmentMin"
                    placeholder="最少（万元）"
                    clearable
                  />
                  <span class="ml-4 mr-4">至</span>
                  <el-input
                    v-model="state.totalInvestmentMax"
                    placeholder="最多（万元）"
                    clearable
                  />
                </div>
              </el-form-item>
              <el-form-item v-else label="投资匡算：" label-width="200px">
                <div class="flex" style="width: 100%">
                  <el-input
                    v-model="state.investmentEstimationMin"
                    placeholder="最少（万元）"
                    clearable
                  />
                  <span class="ml-4 mr-4">至</span>
                  <el-input
                    v-model="state.investmentEstimationMax"
                    placeholder="最多（万元）"
                    clearable
                  />
                </div>
              </el-form-item>
            </div>
            <div class="flex-1" style="width: 32%">
              <el-form-item label="项目行业主管部门：" label-width="200px">
                <el-select
                  v-model="state.industryRegulatoryAuthorities"
                  filterable
                  placeholder="请选择项目行业主管部门"
                  fit-input-width
                >
                  <el-option
                    v-for="item in state.apartmentList"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  >
                    <span :title="item.orgName">{{ item.orgName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>

              <!--<el-form-item label="项目所属行业:" prop="projIndustry" label-width="200px">
                <el-cascader v-model="state.projIndustry" :options="state.projectIndustryList"
                             :props="{ 'label': 'itemName', 'value': 'itemId' }" :show-all-levels="false" />
              </el-form-item>-->
              <el-form-item class="form-btn">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button plain @click="reset">重置</el-button>
                <template v-if="['cgx'].indexOf(query.pageType) == -1">
                  <el-button plain @click="clickAdd">新增</el-button>
                </template>
                <el-button plain @click="clickImport">{{ configInfo.importButtonText }}</el-button>
                <!-- <el-button v-if="query.pageType.includes('cgx')" plain @click="putInStorage">批量申请入库</el-button> -->
              </el-form-item>
            </div>
          </div>
        </el-form>

        <el-form :inline="true" ref="lineFormRef" class="lineFormRef">
          <div class="flex flex-wrap">
            <div style="width: 31%">
              <el-form-item label="项目名称：" label-width="140px">
                <el-input v-model="state.projName" placeholder="请输入项目名称查询" clearable />
              </el-form-item>
              <el-form-item label="国民经济行业分类：" label-width="165px">
                <industry-categorys @confirm="logConfirm" ref="pageTreeRef" />
              </el-form-item>
            </div>
            <div style="width: 37%">
              <el-form-item label="意向总投资：" label-width="200px">
                <div class="flex" style="width: 100%">
                  <el-input
                    v-model="state.totalInvestmentMin"
                    placeholder="最少（万元）"
                    clearable
                  />
                  <span class="ml-4 mr-4">至</span>
                  <el-input
                    v-model="state.totalInvestmentMax"
                    placeholder="最多（万元）"
                    clearable
                  />
                </div>
              </el-form-item>
              <el-form-item label="项目行业主管部门：" label-width="200px">
                <el-select
                  v-model="state.industryRegulatoryAuthorities"
                  filterable
                  placeholder="请选择项目行业主管部门"
                >
                  <el-option
                    v-for="item in state.apartmentList"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-1" style="width: 32%">
              <el-form-item label="项目所属行业:" prop="projIndustry" label-width="200px">
                <el-cascader
                  v-model="state.projIndustry"
                  :options="state.projectIndustryList"
                  :props="{ label: 'itemName', value: 'itemId' }"
                  :show-all-levels="false"
                />
              </el-form-item>
              <el-form-item label="项目所在地：" label-width="200px">
                <area-select
                  ref="refAreaSelect"
                  @change="changeArea"
                  @countryChange="countryChange"
                  @changeAreaProp="changeAreaProp"
                ></area-select>
              </el-form-item>
            </div>
          </div>
          <el-form-item class="form-btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button plain @click="reset">重置</el-button>
            <template v-if="['shcb', 'zfcb', 'cgx'].indexOf(query.pageType) == -1">
              <el-button plain @click="clickAdd">新增</el-button>
            </template>
            <el-button plain @click="clickImport">{{ configInfo.importButtonText }}</el-button>
            <!-- <el-button v-if="query.pageType.includes('cgx')" plain @click="putInStorage">批量申请入库</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <!--表格 height-->
      <el-table
        :max-height="tableHeight"
        :data="state.tableData"
        @sort-change="handleSortChange"
        :class="[query.pageType]"
        @selection-change="selectionChange"
        header-cell-class-name="th-bg"
        border
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, key) in configInfo.thInfo"
          :type="item.prop"
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable ? item.sortable : falseFlag"
          :min-width="item.width"
          :key="key"
        >
          <template #default="scope">
            <span v-if="item.prop == 'index'" class="text-center inherit">
              {{ (pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1 }}
            </span>
            <span v-else-if="item.prop == 'cz'" class="table-ope">
              <!-- 实施库暂不可用这个 isTransfer ==0 可以转 link-disable 后台未加字段判断禁用 状态-->
              <template v-for="(cz, czI) in item.arr" :key="czI">
                <template v-if="!(isFGW && cz.btnCode === 'change')">
                  <span
                    v-if="cz.changeDisabled && scope.row[cz.prop] && scope.row[cz.prop] != 0"
                    class="link-disable"
                  >
                    {{ cz.name }}
                  </span>
                  <span v-else :class="['link-text']" @click="tdEvent(scope.row, item, cz)">
                    {{ cz.name }}
                    <!-- <span v-if="czI < item.arr.length - 1 && (isFGW&&cz.btnCode==='change')" class="split-line mr-8 ml-8">|</span> -->
                  </span>
                </template>
              </template>
            </span>
            <span v-else-if="item.action" @click="tdEvent(scope.row, item)" class="link-text">{{
              scope.row[item.prop]
            }}</span>
            <span v-else-if="item.prop == 'projIndustryName'">
              {{
                scope.row[item.prop]
                  ? scope.row[item.prop] == ''
                    ? '-'
                    : `${scope.row[item.prop]}(${scope.row['projIndustry']})`
                  : '-'
              }}
            </span>
            <span v-else-if="item.prop == 'industryCategoryName'">
              {{
                scope.row[item.prop]
                  ? scope.row[item.prop] == ''
                    ? '-'
                    : `${scope.row[item.prop]}(${scope.row['industryCategory']})`
                  : '-'
              }}
            </span>
            <span v-else>{{
              scope.row[item.prop] ? (scope.row[item.prop] == '' ? '-' : scope.row[item.prop]) : '-'
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <page-plugin @change="pageChange" :pageInfo="pageInfo" class="pageRef"></page-plugin>
    </div>
  </div>
  <add-dialog ref="refAddDialog" @success="selectPage" :page-type="query.pageType"></add-dialog>
  <import-library
    v-if="importDialogVisible"
    :open="importDialogVisible"
    @success="selectPage"
    :investment-type="configInfo.investmentType"
    :import-template-url="configInfo.importTemplateUrl"
    :import-url="configInfo.importUrl"
    @close="closeImportDialog"
  >
  </import-library>
  <el-dialog
    v-model="tipLogVisible"
    :modal="falseFlag"
    class="tip-log-wrap"
    width="20%"
    align-center
    center
  >
    <div class="text-center">
      <el-icon :size="56" color="#40C563">
        <SuccessFilled />
      </el-icon>
      <div class="leading-40 text-lg font-extrabold">发起赋码申请</div>
      <div class="mt-16">已成功发起赋码申请要求</div>
    </div>
  </el-dialog>
</template>

<script setup name="basicPage">
import { reactive, onBeforeMount, onMounted, ref, watch, nextTick } from 'vue'
import { indexPageConfig } from './indexPage'
import { useRoute, useRouter } from 'vue-router'
import AddDialog from './dialog/AddDialog.vue'
import { pkgUrlParams, openApproveTab } from '@/views/basic/tableBtns.js'
// import { mlListApi, cbListApi, ssListApi } from "@/api/basic/index"
import { queryDepartmentList, barList } from '@/api/basic/index'
import { ElMessage, ElLoading } from 'element-plus'
import ImportLibrary from '@/views/zztest/ImportLibrary.vue'
import { portalTabEnable, openLoading, closeLoading } from '@/utils/util.js'
import axios from '@/utils/axios'
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'

const store = useUserInfoStore()
const isFGW = store.userInfo.IS_FGW // 是否为发改部门账号

const route = useRoute()
const router = useRouter()
const { query } = route

let tableHeight = null //query.pageType.includes('cgx') ? ref(window.innerHeight - 240) : ref(window.innerHeight - 400)
let wrapHeight = ref((window.innerHeight - 140) / 100 + 'rem')
const refAddDialog = ref(null)
const pageTreeRef = ref()
let tipLogVisible = ref(false)
const importDialogVisible = ref(false)
const closeImportDialog = () => {
  importDialogVisible.value = false
}
const refAreaSelect = ref()

// 点击导入
const clickImport = () => {
  importDialogVisible.value = true
}
const clickAdd = () => {
  refAddDialog.value.open({
    title: '新增',
    type: 'add'
  })
}

onMounted(() => {
  autoSize()
  window.addEventListener('resize', autoSize)
})
function autoSize() {
  nextTick(() => {
    let lineFormRef = document.querySelector('.lineFormRef').clientHeight
    let dzTabRef = document.querySelector('.dzTabRef').clientHeight
    let tabRef = document.querySelector('.tabRef').clientHeight
    let pageRef = document.querySelector('.pageRef')?.clientHeight
      ? document.querySelector('.pageRef')?.clientHeight
      : 85
    let height = window.innerHeight - lineFormRef - dzTabRef - tabRef - pageRef
    tableHeight = query.pageType.includes('cgx') ? ref(window.innerHeight - 240) : ref(height)
    let temp = (window.innerHeight - dzTabRef + 90) / 100 + 'rem'
    wrapHeight.value = temp
  })
}
let configInfo = null
onBeforeMount(() => {
  // 增加地区绑定条件
  if (query.xzqhdm) {
    state.xzqhs = [query.xzqhdm.substring(2) == '0000' ? query.xzqhdm : query.xzqhdm]
    nextTick(() => {
      refAreaSelect.value.setData({
        regionProvince: query.xzqhdm.substring(0, 2) + '0000',
        regionCity: query.xzqhdm.substring(2) == '0000' ? '' : query.xzqhdm
      })
    })
  }

  // console.log(indexPageConfig, state.pageType)
  configInfo = indexPageConfig[state.pageType]
  state.activeName = configInfo.tabPane[0]['prop']
  selectPage()
  queryDepartmentList().then((res) => {
    state.apartmentList = res?.content || []
  })

  let url = '/pas-approve/pas/projNationRelate/listXmsshyTree'
  axios.get(url).then((result) => {
    state.projectIndustryList = result.content
  })
  let libraryType = query.pageType.includes('zf') ? '1' : '2'
  let investmentType = query.pageType.includes('ml')
    ? '1'
    : query.pageType.includes('cb')
    ? '2'
    : '3'
  barList({ libraryType: libraryType, investmentType: investmentType }).then((res) => {
    let content = res?.content || []
    let { isdisable, regionName, regionNum } = content
    let arr
    if (content.children) {
      arr = [{ isdisable, regionName, regionNum }, ...content.children]
    } else {
      arr = [{ isdisable, regionName, regionNum }]
    }
    state.dzTabActive = regionNum
    state.dzTab = arr
  })
})
const state = reactive({
  treeCheckedData: [],
  industryCategorys: [],
  projName: '',
  pageType: query.pageType,
  activeName: null,
  tableData: [],
  totalInvestmentMax: '',
  totalInvestmentMin: '',
  investmentEstimationMax: '',
  investmentEstimationMin: '',
  sort: '',
  order: '',
  apartmentList: [], // "项目行业主管部门" 下拉数据集合
  industryRegulatoryAuthorities: '',
  sshy: '',
  projIndustry: '',
  projectIndustryList: [], //项目所属行业
  xzqhs: [],
  dzTitle: query.pageType.includes('ml')
    ? '目录库'
    : query.pageType.includes('cb')
    ? '储备库'
    : '实施库',
  dzTabActive: '420000',
  dzTab: []
})
let falseFlag = false
let loadingInstance

let pageInfo = {
  pageNum: 1,
  pageSize: 10,
  total: 0
}
//todo tab 点击切换
const tabsClick = (tab, event) => {
  console.log(tab, event)
}
//翻页插件 点击切换
const pageChange = (param) => {
  pageInfo = { ...pageInfo, ...param }
  selectPage()
}
// 表格字段点击
const tdEvent = (row, thInfo, btn) => {
  if (btn && btn.btnCode == 'startCoding') {
    openLoading('赋码中，请稍后')
    axios
      .get(
        '/pas-approve/pasProjImplementation/generateLocalCode?implementationId=' +
          row.implementationId
      )
      .then((res) => {
        if (res.success) {
          ElMessage.success('赋码成功')
          selectPage()
        } else {
          ElMessage.error(res.message || '赋码失败')
        }
      })
      .finally(() => closeLoading)
    // tipLogVisible.value = true;
    // setTimeout(() => {
    //   tipLogVisible.value = false;
    // }, 3000)
    return
  }
  // 打开审批详情页
  if (portalTabEnable) {
    // 打开tab
    openApproveTab(
      {
        row: row,
        th: { label: btn.name, btnCode: btn.btnCode }
      },
      query
    )
  } else {
    const urlParams = pkgUrlParams(
      {
        row: row,
        th: { label: btn.name, btnCode: btn.btnCode }
      },
      query
    )
    if (!urlParams) {
      ElMessage('跳转失败，前端需要检查传参')
      return null
    }
    router.push({
      name: 'ApproveIndex',
      query: {
        ...query,
        ...urlParams
      }
    })
  }
}

//todo 草稿箱 复选框
const selectionChange = (val) => {
  console.log('复选框=', val)
}
//批量申请入库 按钮点击
// const putInStorage = ()=>{
//   console.log("点击了 批量申请入库按钮");
//   //todo 入库接口
// }
//各个城市 tab 点击
let objActive = {
  //暂时可用的后续要放开
  420000: true,
  420100: true,
  420500: true,
  420200: true,
  420900: true
} //暂时控制
const dzTabEvent = (item) => {
  console.log(item)
  if (item.isdisable) {
    //禁用的
    return
  }
  state.dzTabActive = item.regionNum // objActive[item.xzqhdm] ? item.xzqhdm : state.dzTabActive
  state.xzqhs = [item.regionNum]
  selectPage()
}
//
const changeArea = (val) => {
  console.log('change==', val)
  let { county, city, province } = val
  let code = county != '' ? county : city != '' ? city : province
  if (objActive[city]) {
    //暂时这样
    state.dzTabActive = city
  }
  state.xzqhs = [code]
}
const changeAreaProp = (val) => {
  console.log(val)
}
const countryChange = (val) => {
  console.log(val)
}
function resData(param) {
  let { total, list, pageSize, pageNum } = param.content || {}

  pageInfo = { total, pageSize, pageNum }
  state.tableData = list
}

const logConfirm = (param) => {
  if (param && param.length) {
    state.industryCategorys = param
  } else {
    state.industryCategorys = []
  }
}
const search = () => {
  pageInfo.pageNum = 1
  selectPage()
}
const reset = () => {
  pageInfo = {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
  state.totalInvestmentMax = ''
  state.totalInvestmentMin = ''
  state.industryCategorys = ''
  state.projName = ''
  state.industryRegulatoryAuthorities = ''
  // pageTreeRef.value.resetTreeContent();
  refAreaSelect.value.resetAreaData()
  selectPage()
}

//表格显示的
function selectPage() {
  loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  let {
    industryCategorys,
    projName,
    sort,
    order,
    totalInvestmentMax,
    totalInvestmentMin,
    industryRegulatoryAuthorities,
    xzqhs
  } = state
  let { pageNum, pageSize } = pageInfo
  let obj = {
    pageNum: pageNum,
    pageSize: pageSize,
    projName: projName,
    industryCategorys: industryCategorys.toString(),
    sort: sort,
    order: order,
    totalInvestmentMax: totalInvestmentMax,
    totalInvestmentMin: totalInvestmentMin,
    investmentEstimationMin: state.investmentEstimationMin,
    investmentEstimationMax: state.investmentEstimationMax,
    industryRegulatoryAuthorities: industryRegulatoryAuthorities,
    xzqhs: xzqhs.toString()
  }
  // sh=社会 or zf=政府 ml=目录 or cb=储备 of ss=实施
  let str = query.pageType.includes('zf') ? 'zf' : 'sh'
  if (str === 'zf') {
    obj.investmentType = 1
  } else {
    obj.investmentType = 2
  }
  // console.log(obj)
  axios
    .get(configInfo.listUrl, { params: obj })
    .then((res) => {
      resData(res)
    })
    .finally(() => {
      loadingInstance.close()
    })
  // console.log(obj)
  // if (query.pageType.includes('ml')) {
  //   mlListApi(obj, str).then((res) => {
  //     resData(res);
  //   }).finally(() => {
  //     loadingInstance.close();
  //   })
  // } else if (query.pageType.includes('cb')) {
  //   cbListApi(obj, str).then((res) => {
  //     resData(res);
  //   }).finally(() => {
  //     loadingInstance.close();
  //   })
  // } else if (query.pageType.includes('ss')) {
  //   ssListApi(obj, str).then((res) => {
  //     resData(res);
  //   }).finally(() => {
  //     loadingInstance.close();
  //   })
  // } else {
  //   //todo 草稿箱的接口  返回字段与配置一致的要后台人员修改为一致
  //   loadingInstance.close(); //关闭loading
  // }
}
/** 排序触发事件 */
function handleSortChange(column) {
  state.sort = 'total_investment' //column.prop ;
  state.order = column.order ? (column.order == 'descending' ? 'desc' : 'asc') : ''
  pageInfo.pageNum = 1
  selectPage()
}

// 参数改变时，自动刷新一下页面
watch(
  () => route.query,
  () => {
    router.go(0)
  }
)
</script>

<style lang="scss" scoped>
:deep(.el-tabs__header .el-tabs__item.is-active) {
  position: relative;
  top: 0.01rem;
  background: #fff;
}

.dz-tab {
  /*height: .40rem;*/
  line-height: 0.4rem;
  border-bottom: 1px solid #dcdfe6;
  /*margin-bottom: 0.16rem;*/
  padding: 0.16rem;

  .title {
    font-family: 'Source Han Sans CN Bold';
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 0.24rem;
    text-align: left;
    color: #535862;
  }

  .dz-tab-item {
    padding: 0 0.14rem;
    font-weight: 700;
    font-size: 0.14rem;
    line-height: 0.28rem;
    text-align: left;
    color: #535862;
    cursor: pointer;
  }

  .dz-tab-item:last-child {
    padding-right: 0;

    i {
      display: none;
    }
  }

  .dz-tab-disable {
    cursor: default;
    color: #b4b9c2;
  }

  .active {
    font-family: 'Source Han Sans CN Bold';
    font-weight: 700;
    font-size: 0.18rem;
    color: #3e6dfa;
  }

  .line {
    display: inline-block;
    right: 0;
    width: 0.01rem;
    height: 0.14rem;
    top: 0.08rem;
    background: #b4b9c2;
  }
}

.bs {
  &-page-tip {
    font-size: 0.14rem;
    /*height: .50rem;
    line-height: .50rem;*/
    border-radius: 0.04rem;
    background: #3e6dfa1a;
    border: 1px solid #3e6dfa66;
    height: auto;
    line-height: 0.22rem;
    padding: 0.12rem 0.16rem;
    margin-bottom: 0.16rem;
  }

  :deep(.el-select),
  :deep(.el-cascader .el-input),
  :deep(.el-select .el-input),
  .el-form-item__content,
  .el-form--inline .el-input,
  :deep(.el-cascader) {
    width: 100%;
  }

  .el-form-item {
    width: 100%;
  }

  .form-btn {
    width: 100%;
    flex-shrink: 0;
  }

  .form-btn :deep(.el-form-item__content) {
    justify-content: right;
  }

  .el-form--inline .el-form-item:last-child {
    margin-right: 0;
  }
}

:deep(.el-table th.el-table__cell) {
  font-family: 'Source Han Sans CN Bold';
  font-weight: 700;
  color: #535862;
  background-color: #f1f4f6;
}

.link-text {
  color: #4769f5;
  cursor: pointer;
}

.link-disable {
  color: #c5d3fd;
}

.split-line {
  color: #e5e5e5;
}

.el-form-item,
.el-form-item__content,
.el-form--inline .el-input {
  width: 100%;
}

.el-form-item {
  flex-grow: 1;
}

.form-btn {
  width: 30%;
  flex-shrink: 0;
}

.form-btn :deep(.el-form-item__content) {
  justify-content: right;
}

.el-form--inline .el-form-item:last-child {
  margin-right: 0;
}

.new-dz-wrap {
  width: 95%;
  position: relative;
  top: 0.05rem;

  .line {
    right: 25%;
  }
}
</style>
<style>
.tip-log-wrap .el-dialog__header {
  background: #fff;
}

.el-table--default .el-table__cell {
  padding: 0.12rem 0;
}

/*.zfss .el-table__cell,
.shss  .el-table__cell,
.zfcb .el-table__cell,
.shcb  .el-table__cell{
  padding: .1rem 0;
}*/
.table-ope {
  position: relative;
}

.table-ope span {
  position: relative;
}

.table-ope span + span {
  margin-left: 14px;
}

.table-ope span + span::before {
  content: '';
  position: absolute;
  top: 1px;
  left: -10px;
  width: 1px;
  height: 14px;
  background: #e5e5e5;
}
</style>
<style lang="scss" scoped>
.demo {
  .dz-tab {
    .dz-tab-item {
      font-size: $font-size-16;

      &.active {
        font-size: $font-size-18;
      }
    }

    .dz-title-box {
      width: 6% !important;

      .title {
        font-size: $font-size-18;
      }
    }
  }

  .address {
    ::v-deep(.el-form-item__label) {
      width: 110px !important;
    }
  }

  .lineFormRef {
    .form-btn {
      ::v-deep(.el-form-item__content) {
        .el-button > span {
          font-size: $font-size-16;
        }
      }
    }
  }
}
</style>
